<template>
  <view class="w-full h-full">
    <view
      class="top-title mt-34rpx mb-34rpx ml-34rpx flex text-center justify-between"
      style="height: 70rpx; line-height: 70rpx"
    >
      <h3>{{ title }}</h3>
      <view class="mr-40rpx color-[#9f9f9f]" @click="searchAllImg">查看全部 ></view>
    </view>
    <scroll-view class="scrollContainer" scroll-x>
      <view
        class="scrollitem"
        v-for="(item, index) in goodsArr"
        :key="index"
        @click="getItem(item)"
      >
        <wd-img
          :width="190"
          :height="100"
          class="scrollimage"
          :src="item.imgUrl"
          :enable-preview="true"
          radius="8"
        />
        <view class="recommandItemText">{{ item.contentTitle }}</view>
      </view>
      <view class="EmptyData" v-if="goodsArr.length == 0">暂无数据</view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { GoodsArr } from '@/types/indexModule/type'

const props = defineProps({
  title: {
    type: String,
    default: '故事板',
  },
  goodsArr: {
    type: Array as PropType<GoodsArr[]>,
    required: true, // 是否为必传属性
  },
})
const emits = defineEmits(['currentItem', 'clickSearchAllImg'])
const getItem = (item) => {
  emits('currentItem', item)
}

const searchAllImg = (id) => {
  emits('clickSearchAllImg', {
    ...id,
    code: 200,
    message: '查看全部按钮被点击',
  })
}
</script>

<style scoped lang="scss">
// 容器
.scrollContainer {
  width: 666rpx;
  height: 254rpx;
  white-space: nowrap;

  /* 隐藏滚动条 */
  ::-webkit-scrollbar {
    display: none;
  }
}

// 容器项
.scrollitem {
  display: inline-block;
  margin-left: 16rpx;
  height: 244rpx;
}

.scrollimage {
  width: 190rpx;
  height: 120rpx;
}

.recommandItemText {
  width: 270rpx;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.EmptyData {
  text-align: center;
  margin-top: 50rpx;
}
</style>
